<template>
  <wd-text custom-class="span" :text="displayedText"></wd-text>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

interface Props {
  text: string;
  speed: number;
}

const props = defineProps<Props>();

const displayedText = ref("");
let index = 0;

const type = () => {
  if (index < props.text.length) {
    displayedText.value += props.text.charAt(index);
    index++;
    setTimeout(type, props.speed);
  }
};

onMounted(() => {
  type();
});
</script>

<style scoped>
.span {
  width: 100% !important;
  font-size: 30rpx !important;
  font-weight: regular;
  line-height: 46rpx !important;
  color: #3c3e42 !important;
  text-align: left !important;
  letter-spacing: 0rpx;
}
</style>
